<script type="text/javascript" src="{{$LAYOUT_HELPER_URL}}front/scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="{{$LAYOUT_HELPER_URL}}front/scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="{{$LAYOUT_HELPER_URL}}front/scripts/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery(".product_light_box").fancybox({
			'width'				: 940,
			'height'			: 542,
			'titleShow'         : false,
			'autoScale'			: false,
			'transitionIn'		: 'none',
			'transitionOut'		: 'none'
		});

		jQuery('ul#selectCat li > a').click(function(){
			var action = jQuery(this).attr('rel');
			var title = jQuery(this).attr('title');
			jQuery('#search').attr("action",action);
			jQuery('span#category_title').html(title);
		});
		
	});
</script>

<div id="section03">
        <div id="mainContent">
            <div class="GraySection01">
                <!--Choice Section-->
                <div class="container_12">
                    <div class="grid_4">
                        <h2 class="Title03">{{$cat.name}}</h2>
                    </div>
                    
                    <div class="grid_3" style="width: 137px;">
                    {{if $countAllPages > 1}}
                        <ul class="PagingList" style="float: right;margin-right: -3px;">
                        	<!-- {{if $prevPage}}
                            <li><a title="Previous" href="?page={{$prevPage}}" rel="?page={{$prevPage}}">Previous</a></li>
                            {{/if}} -->
                            
                            {{foreach from=$prevPages item=item}}
                            <li><a href="?page={{$item}}" rel="?page={{$item}}" title="{{$item}}">{{$item}}</a></li>
                            {{/foreach}}
                            
                            <li class="ActivePage"><a rel="#" title="{{$currentPage}}">{{$currentPage}}</a></li>
                            
                            {{foreach from=$nextPages item=item}}
                            <li><a href="?page={{$item}}" rel="?page={{$item}}" title="{{$item}}">{{$item}}</a></li>
                            {{/foreach}}
                            
                            <!--{{if $nextPage}}
                            <li><a href="?page={{$nextPage}}"  rel="?page={{$nextPage}}" title="Next"><span>Next</span></a></li>
                            {{/if}}-->
                        </ul>
                    {{else}}
                    &nbsp;
                    {{/if}}
                    
                    </div>
                    
                    <form name="search" id="search" method="post" action="{{$BASE_URL}}product/index/index/cid/{{$cat.product_category_gid}}">
                    <div class="grid_3" style="width: 303px;">
                        <ul class="KeyForm" style="width: 303px;">
                            <li class="ButtonStyle01">
                                <a href="javascript:;" title="category" style="width: 170px;"><span id="category_title">{{$cat.name}}</span></a>
                                <ul id="selectCat">
                                	{{foreach from=$allCategories item=category}}
                                    <li style="width: auto;"><a class="select_category" style="width: 155px;text-align: left; padding-left: 15px;" href="javascript:;" rel="{{$BASE_URL}}product/index/index/cid/{{$category.product_category_gid}}" title="{{$category.name}}"><span>{{$category.name}}</span></a></li> 
                                    {{/foreach}}   
                                </ul>
                            </li>
                            <li><input type="text" onfocus="if(this.value != ''){ this.value = '';}" onblur="if(this.value == ''){ this.value = {{$condition.keyword}};}" name="condition[keyword]" id="txtKey" value="{{if $condition.keyword}}{{$condition.keyword}}{{else}}keyword{{/if}}" /></li>
                        </ul>
                    </div>
                    <div class="grid_2">
                        <ul class="ButtonList">
                            <li>
                                <p class="ButtonStyle02"><a href="?view=list" title="List">List&nbsp;&nbsp;<img src="{{$LAYOUT_HELPER_URL}}front/images/dummy.gif" alt="Icon" class="uiIcon initIcon03" /></a></p>
                            </li>
                            <li>
                                <p class="ButtonStyle03"><a href="?view=grid" title="Grid">Grid&nbsp;&nbsp;<img src="{{$LAYOUT_HELPER_URL}}front/images/dummy.gif" alt="Icon" class="uiIcon initIcon04" /></a></p>
                            </li>
                        </ul>
                    </div>
                    </form>
                    
                    <div class="clear"></div>
                </div>
                <!--end: Choice Section-->
            </div>
            
            <!--White Section-->
            <div class="WhiteSection">
                <div class="container_12">
                    <div class="grid_12 P35tb">
                        <ul class="ProductGrid">
                        	
                        	{{foreach from=$allProducts name=products item=product}}
                        	
                            <li>
                                <div class="ProductContent">
                                    <a class="product_light_box" href="#product_light_div{{$product.product_gid}}" title="{{$product.title}}"><img src="{{$BASE_URL}}{{$product.main_image}}" alt="{{$product.title}}" /></a>
                                    <div class="Container02">
                                        <div class="Descriptions">
                                            <a class="Title01" style="text-decoration: none;" href="{{$product.url}}" title="{{$product.title}}">{{$product.title}}</a>
                                            <p><span>{{$product.sku}}</span>&nbsp;&nbsp;<span>RRP ${{$product.price}}</span></p>
                                        </div>
                                        <div class="ButtonChoice">
                                            <p class="ButtonInfo"><a href="{{$product.url}}" title="Info">Info</a></p>
                                            <p class="ButtonFull M10top"><a class="product_light_box" href="#product_light_div{{$product.product_gid}}" title="Full">Full</a></p>
                                        </div>
                                        
                                        <!--Lightbox-->
                                        <div style="display: none;">
										   <div class="LightSection" id="product_light_div{{$product.product_gid}}">
										        <div class="Container04">
										            <div class="Picture">
										                <a href="{{$product.url}}" title="{{$product.title}}"><img src="{{$BASE_URL}}{{$product.full_image}}" alt="{{$product.title}}" /></a>
										            </div>
										            <div class="Descriptions">
										                <div class="Logo">
										                    <h1><a href="{{$BASE_URL}}" title="Suzuki">Suzuki</a></h1>
										                </div>
										                <h2 class="Title06 M10top">{{$product.title}}</h2>
										                <p>{{$product.sku}}</p>
										                <p>RRP ${{$product.price}}</p>
										                
										                <div class="M30top">
										                    <p class="ButtonGray01"><a href="{{$product.url}}" title="visit products page">visit products page</a></p>
										                </div>
										            </div>
										        </div>
										   	</div>
										 </div>
										<!--end: Lightbox -->
										
                                    </div>
                                </div>
                            </li>
                            
                            {{/foreach}}
                            
                        </ul>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <!--end: White Section-->

            <!--Black Section-->
            <div class="BlackSection01"></div>
            <!--end: Black Section-->
        </div>
    </div>